<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_获得组件的内容</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        let app = document.getElementById('app')
        let {Component,Fragment} = React;
        /* 
        React组件
            如果想要获取外界传入的数据，是通过自身的props获取的
            如果想要获取到传递给组件的内容部分的数据，是通过自身的props对象的children属性获取的

            注意：向组件内部传值时，自定义属性的名字不要叫chilren
        */
        class Child1 extends Component {
            render(){
                return <fieldset>
                    <legend><h2>Child1组件</h2></legend>
                    <ul>
                        {
                            this.props.hotCity.map(v=>{
                                return <li key={v}>{v}</li>
                            })
                        }    
                    </ul>

                    <ol>
                        {
                            this.props.children.map((v,i)=>{
                                return <li key={i}>
                                    {v}    
                                </li>
                            })
                        }    
                    </ol>
                </fieldset>
            }
        }

        let cities = ["北京","上海","广州","湖南","湖北","浙江"]

        ReactDOM.render(<Child1 hotCity={cities}>
                hello，React！
                <button>按钮</button>
                <input type="text" placeholder="请输入内容" />
            </Child1>,app)
            
    </script>
</body>
</html>